<html >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>我的消息</title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    </head>
    <style >
        /* 微信气泡 */
        body{background-color: #F0F0F0}
         .bar-title h4{
            background-color: #07E9A1;
            text-align: center;
            color: #fff;
            height: 2rem;
            line-height: 2rem;
            margin-top: 0;
            margin-bottom: 0;
        }
        div.speech {
              float: left;
              margin: 10px 0;
              padding: 8px;
              table-layout: fixed;
              word-break: break-all;
              position: relative;
              background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #ececec), color-stop(0.5, #dbdbdb), color-stop(0.9, #dcdcdc), to(#8c8c8c) );
              border: 1px solid #989898;
              border-radius: 8px;
          }
          div.speech:before {
              content: '';
              position: absolute;
              width: 0;
              height: 0;
              left: 15px;
              top: -20px;
              border: 10px solid;
              border-color: transparent transparent #989898 transparent;
          }
          div.speech:after {
           content: '';
           position: absolute;
           width: 0;
           height: 0;
           left: 17px;
           top: -16px;
           border: 8px solid;
           border-color: transparent transparent #ffffff transparent;
          }
          div.speech.right {
           display: inline-block;
           box-shadow: -2px 2px 5px #CCC;
           margin-right: 10px;
           max-width: 75%;
           float: right;
           background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#e4ffa7), color-stop(0.1, #bced50), color-stop(0.4, #aed943), color-stop(0.8, #a7d143), to(#99BF40) );
          }
          div.speech.right:before {
           content: '';
           position: absolute;
           width: 0;
           height: 0;
           top: 9px;
           bottom: auto;
           left: auto;
           right: -10px;
           border-width: 9px 0 9px 10px;
           border-color: transparent #989898;
          }
          div.speech.right:after {
           content: '';
           position: absolute;
           width: 0;
           height: 0;
           top: 10px;
           bottom: auto;
           left: auto;
           right: -8px;
           border-width: 8px 0 8px 9px;
           border-color: transparent #bced50;
          }
          div .left {
           display: inline-block;
           box-shadow: 2px 2px 2px #CCCCCC;
           margin-left: 10px;
           max-width: 75%;
           position: relative;
           background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #eae8e8), color-stop(0.4, #E3E3E3), color-stop(0.8, #DFDFDF), to(#D9D9D9) );
          }
          div .left:before {
           content: '';
           position: absolute;
           width: 0;
           height: 0;
           top: 9px;
           bottom: auto;
           left: -10px;
           border-width: 9px 10px 9px 0;
           border-color: transparent #989898;
          }
          div .left:after {
           content: '';
           position: absolute;
           width: 0;
           height: 0;
           top: 10px;
           bottom: auto;
           left: -8px;
           border-width: 8px 9px 8px 0;
           border-color: transparent #eae8e8;
          }
          .leftimg {
           float: left;
           margin-top: 10px;
          }
          .rightimg {
           float: right;
           margin-top: 10px;
          }
          .leftd {
           clear: both;
           float: left;
           margin-left: 10px;
          }
          .rightd {
           clear: both;
           float: right;
           margin-right: 10px;
          }

          .leftd_h{
           width: 39px;
           height: 39px;
           border-radius: 100%;
           display: block;
           float: left;
           overflow: hidden;
          }
          .leftd_h img {
            float: left;
            width: 50px;
            height: 50px;
          }

         
          .rightd_h{
           width: 39px;
           height: 39px;
           border-radius: 100%;
           display: block;
           float: right;
           overflow: hidden;
          }

          .rightd_h img {
            float: left;
            width: 50px;
            height: 50px;
          }
           .bar-header .title {
          background: #07E9A1;
          color: #fff;
        }
        .input-fixed{
          position: fixed;
          bottom: 0;
        }
        .bar-footer {
          font-size:20px; 
          background-color: #F0F0F0;
        }
       .bar-footer  input{
           background-color: #fff !important;
           border-radius: 5px;
        }
       
          
    </style>
    <body>
       <ion-header-bar  class="bar-positive bar-title">
             <h4 class="title">王小二</h4>
       </ion-header-bar>
       <ion-content>
         <!--  <div class="content has-header"> -->
             <div class="leftd">
            <div class="leftd_h">
                <img src="img/1.jpg" />
            </div>
            <div class="speech left" ng-class="speech left"> 
                ok,知道了
            </div>
        </div>
        <div class="rightd">
            <span   class="rightd_h">
                <img src="img/2.jpg" />
            </span>
            <div class="speech right" ng-class="speech left"> 
               听明白了
            </div>
        </div>
        <div class="rightd">
            <span   class="rightd_h">
                <img src="img/2.jpg" />
            </span>
            <div class="speech right" ng-class="speech left"> 
               听明白了，不知道啊...
            </div>
       <!--  </div> -->
          </div>
     
    

        <!--    输入框 -->
      <div class="bar bar-footer item-input-inset">
        <i class="icon ion-volume-high"></i>
      <label class="item-input-wrapper">
        <input type="search" placeholder="">
      </label>
        <i class="icon ion-plus-circled"></i>
    </div>
  </ion-content>
    </body>
</html>
      